<template>
  <div class="dashboard">
    仪表盘

    <el-table border striped :data="orders">
      <el-table-column prop="orderId" label="ID" width="180" fixed></el-table-column>
      <el-table-column prop="address" label="订单地址" width="180" fixed></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
      <el-table-column prop="contact" label="联系人" width="180"></el-table-column>
      <el-table-column prop="pay" label="订单金额" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="180" fixed="right"></el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'

const orders = ref<any[]>([])

// 利用 websocket 实时获取 c 端用户提交的订单数据
// 创建 WebSocket 对象
const ws = new WebSocket('ws://162.14.108.31:6954/orders')

// 接收服务端实时发送的数据
ws.addEventListener('message', (event) => {
  // console.log(event.data)
  orders.value = JSON.parse(event.data)
})
// ws.onmessage = function (event) {
//   console.log(event.data)
// }

// 组件卸载，释放资源
onBeforeUnmount(() => {
  ws.close()
})

// 组件卸载时，通常销毁的资源有: 
// websocket、定时器、订阅事件、echarts、富文本编辑器实例、未完成的网络请求等
</script>

<style lang="less" scoped>

</style>
